<template>
  <section class="hm-home">
    <router-view></router-view>
    <nav :z-index="101">
      <router-link v-for="tag in tags" :to="`${tag.path}`" :key="tag.path">{{
        tag.name
      }}</router-link>
    </nav>
  </section>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      tags: [
        {
          id: 1,
          name: "面经",
          path: "/home/article",
        },
        {
          id: 2,
          name: "收藏",
          path: "/home/collect",
        },
        {
          id: 3,
          name: "喜欢",
          path: "/home/like",
        },
        {
          id: 4,
          name: "我的",
          path: "/home/mine",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.hm-home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: (60/3.75vw);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-top: (1/3.75vw) solid #ccc;
    .active {
      color: #e6f058;
    }
  }
}
</style>
